<!--一个回复-->
<script setup>

import ReplyAlterInfo from "@/components/read/ReplyAlterInfo.vue";
import ReplyAuthor from "@/components/read/ReplyAuthor.vue";
import ReplyContent from "@/components/read/ReplyContent.vue";
import ReplyGift from "@/components/read/ReplyGift.vue";
import ReplyHeader from "@/components/read/ReplyHeader.vue";
import ReplySubReply from "@/components/read/ReplySubReply.vue";
import {onMounted, ref, toRefs, watch} from "vue";
import {useStore} from "vuex";
import ReplyVote from "@/components/read/ReplyVote.vue";
import {TopicDetail} from "@ginstone/nga-api/dist/src/response/field/TopicDetail";
import {UserContext} from "@ginstone/nga-api/dist/src/response/field/user/UserContext"
import {ReplyInfo} from "@ginstone/nga-api/dist/src/response/field/ReplyInfo"

const props = defineProps({
  userContext: {type: UserContext, required: true},
  reply: {type: ReplyInfo, required: true},
  topic: {type: TopicDetail, required: true},
  selectedId: {type: String},
  hash: {type: String},
})
const emit = defineEmits(['refresh'])

const {reply, userContext} = toRefs(props)
//用户信息
const userInfo = ref();
//小尾巴
const tail = ref();

const store = useStore();
const showDialog = (name, data) => store.commit("Dialog/showDialog", {name, data})
// 是否与hash匹配
const matchHash = (hash, r) => {
  if (!hash) {
    return false
  }
  return [getReplyId(r), getFloorId(r)].includes(hash.substring(1));
}

// 元素id生成方法 回复
const getReplyId = (r) => {
  return r.replyId !== undefined ? 'P' + r.replyId : undefined;
}
// 元素id生成方法 楼层
const getFloorId = (r) => {
  return 'F' + r.floorNumber;
}
// 如果这条回复被选中，添加额外css
const selected = (selectedId) => {
  if (selectedId) {
    if ([getReplyId(reply.value), getFloorId(reply.value)].includes(selectedId))
      return {
        borderStyle: "solid solid solid solid",
        borderWidth: "3px",
      }
  }
  return undefined
}

//更新用户信息
const updateUserInfo = (reply) => {
  if (!reply.authorUid) {
    userInfo.value = undefined
    tail.value = undefined
    return
  }
  userInfo.value = userContext.value.getUserInfo(reply.authorUid)
  const avatarBuff = userInfo.value.avatarBuff
  if (avatarBuff) {
    tail.value = avatarBuff.suffix
  } else {
    tail.value = undefined
  }
}

onMounted(() => updateUserInfo(reply.value))

watch(reply, (nv) => updateUserInfo(nv))

</script>

<template>
  <el-row :id="getReplyId(reply)" :style="selected(selectedId)" class="reply-line-border">
    <!--作者-->
    <el-col :span="6" class="author-border block">
      <reply-author :data="userInfo"/>
    </el-col>
    <!--回复-->
    <el-col :id="getFloorId(reply)" :span="18" class="reply block">
      <!--顶部信息栏-->
      <reply-header :data="reply" :topic="topic"/>
      <!--标题+正文-->
      <reply-content :data="reply"/>
      <!--小尾巴-->
      <span style="color:silver">{{ tail }}</span>
      <!--礼物            -->
      <reply-gift v-if="reply.gifts" :data="reply.gifts"/>
      <!--评分/处罚/取消操作           -->
      <reply-alter-info v-if="reply.alterInfo && reply.alterInfo.logs" :data="reply.alterInfo.logs"/>
      <reply-sub-reply v-if="reply.hotReplies" :data="reply.hotReplies" :topic="topic" :user-context="userContext" title="热门回复"/>
      <reply-sub-reply v-if="reply.comment" :data="reply.comment" :topic="topic" :user-context="userContext" title="评论"/>
      <reply-vote v-if="reply.voteData" :data="reply.voteData" :topic-id="topic.topicId" @refresh="$emit('refresh')"/>
      <div v-if="reply.attachments">
        <h5>附件</h5>
        <el-button size="small" type="primary" @click="showDialog('attachment',reply.attachments)">附件列表</el-button>
      </div>

    </el-col>
  </el-row>
</template>

<style scoped>
.block {
  display: inline-block;
  vertical-align: top;
}

h5 {
  margin-top: 15px;
  margin-bottom: 15px;
}

/*noinspection CssUnusedSymbol*/
.selected {
  border-style: solid solid solid solid;
  border-width: 3px;
}
</style>